/* https://readymag.com/artemtiunov/RingUILanguage/colours/ */

.clearfix {
  &::after {
    display: block;
    clear: both;

    content: '';
  }
}

.font {
  font-family: var(--ring-font-family);
  font-size: var(--ring-font-size);
  line-height: var(--ring-line-height);
}

.font-lower {
  composes: font;

  line-height: var(--ring-line-height-lower);
}

.font-smaller {
  composes: font-lower;

  font-size: var(--ring-font-size-smaller);
}

.font-smaller-lower {
  composes: font-smaller;

  line-height: var(--ring-line-height-lowest);
}

.font-larger-lower {
  composes: font-lower;

  font-size: var(--ring-font-size-larger);
}

.font-larger {
  composes: font-larger-lower;

  line-height: var(--ring-line-height-taller);
}

/* To be used at large sizes */
/* As close as possible to Helvetica Neue Thin (to replace Gotham) */
.thin-font {
  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--ring-font-size);
  font-weight: 100; /* Renders Helvetica Neue UltraLight on OS X  */
}

.monospace-font {
  font-family: var(--ring-font-family-monospace);
  font-size: var(--ring-font-size-smaller);
}

.ellipsis {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.resetButton {
  overflow: visible;

  padding: 0;

  text-align: left;

  color: inherit;
  border: 0;

  background-color: transparent;

  font: inherit;

  &::-moz-focus-inner {
    padding: 0;

    border: 0;
  }
}

/* Media breakpoints (minimal values) */
@value breakpoint-small: 640px;
@value breakpoint-middle: 960px;
@value breakpoint-large: 1200px;

/* Media queries */
@value extra-small-screen-media: (max-width: calc(breakpoint-small - 1px));
@value small-screen-media: (min-width: breakpoint-small) and (max-width: calc(breakpoint-middle - 1px));
@value middle-screen-media: (min-width: breakpoint-middle) and (max-width: calc(breakpoint-large - 1px));
@value large-screen-media: (min-width: breakpoint-large);
